import React, { useState, useEffect } from 'react'
import { View, Image, Swiper, SwiperItem } from '@tarojs/components'
import { AtList, AtListItem, AtButton, AtToast } from "taro-ui"

import './index.less'
import "taro-ui/dist/style/components/list.scss";


export default (props: any) => {
  const { intro, card1, card2, card3, card4, detailSrcs } = props.data
  const list = detailSrcs ? detailSrcs.split('&') : []
  return (
    <View className='info'>
      <Swiper
        className='swiper'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular
        indicatorDots
        autoplay>
        {
          list.map((item, i) => (
            <SwiperItem key={i}>
              <Image className='banner' src={item}></Image>
            </SwiperItem>
          ))
        }
      </Swiper>
      <View className='txt'>{intro}</View>

      <View className='cards'>
        {
          card1 && (<View className='card'>折扣券</View>)
        }
        {
          card2 && (<View className='card'>套餐券</View>)
        }
        {
          card3 && (<View className='card'>体验券</View>)
        }
        {
          card4 && (<View className='card'>满减券</View>)
        }
      </View>
    </View>
  )
}
